<template>
	<y-popup ref="voicePopup" mode='bottom' round="12px">
		<view class="p-16 vh-80">
			<text>选择音色</text>
			<z-paging ref="voicePaging" v-model="list" use-page-scroll @query="getList">
				<y-item-voice :list="list" @select="selected"></y-item-voice>
			</z-paging>
		</view>
	</y-popup>
</template>

<script setup>
	import { ref } from 'vue';
	import { getVoiceList } from '@/api/voice.js'
	const list = ref([])
	const voicePaging = ref(null)
	const voicePopup = ref(null)
	const emit = defineEmits(['selected'])
	const open = () => {
		voicePopup.value.open();
	}
	const getList = (page, limit) => {
		getVoiceList({ page: page, limit: limit, type: 2 }).then(res => {
			voicePaging.value.complete(res.data)
		})
	}
	const selected = (e) => {
		voicePopup.value.close()
		emit('selected', e)
	}
	defineExpose({ open })
</script>

<style>
</style>